<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
    /* 把父容器高度宽度改为100% */
        html,body,#app{
            height: 100%;
            width: 100%;
        }
        a{
            text-decoration: none;  /*去下划线*/
            color: inherit;         /*颜色部分和父容器的一样*/
        }
        .el-menu{
            border: 0px;
        }
        

    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 100%;">

            <el-header style="background-color: cadetblue;" height=80px>
                <!-- 声明一行两列 -->
                <el-row>
                    <el-col :span="5" style="font-size: 24px; margin-top: 22px;">智慧社区物业管理<div class="grid-content bg-purple"></div></el-col>
                    <!-- offset向右偏移 -->
                    <el-col :span="3" style=" margin-top: 24px;" :offset="16">
                    
                        <el-dropdown style="font-size: 20px; color: black;" @command="handleCommand">
                            <span class="el-dropdown-link">
                                欢迎：{{userInfo.username}} <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item command="a"><i class="el-icon-user-solid" ></i>个人中心</el-dropdown-item>
                              <el-dropdown-item command="b"><i class="el-icon-edit"></i>修改密码</el-dropdown-item>
                              <el-dropdown-item command="c"><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                    </el-col>
                </el-row>
            </el-header>

            <el-container >
              <el-aside width="200px" style="background-color:rgb(84, 92, 100);">
                <!-- 系统菜单部分
                     default-active:默认选择哪个菜单
                     @open:菜单的事件

                -->
                <el-menu
                    default-active="2"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">

                    <!-- 一级菜单 -->
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-s-grid"></i>
                        <span>核心业务处理</span>
                        </template>
                        <el-menu-item index="1-1">车位收费管理</el-menu-item>
                        <el-menu-item index="1-2"><a href="/records/recordsPage" target="contend">物业收费管理</a></el-menu-item>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                        <i class="el-icon-office-building"></i>
                        <span>基础信息管理</span>
                        </template>
                        <el-menu-item index="2-1"><a href="/building/buildingPage" target="contend">楼宇管理</a></el-menu-item>
                        <el-menu-item index="2-2"><a href="/housing/housingPage" target="contend">房屋管理</a></el-menu-item>
                        <el-menu-item index="2-3"><a href="/owner/ownerPage" target="contend">业主管理</a></el-menu-item>
                        <el-menu-item index="2-4"><a href="/parking/parkingPage" target="contend">车位管理</a></el-menu-item>
                        <el-menu-item index="2-5">用户管理</el-menu-item>             
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                        <i class="el-icon-s-data"></i>
                        <span>数据统计分析</span>
                        </template>
                        <el-menu-item index="3-1">维修统计分析</el-menu-item>
                        <el-menu-item index="3-2">日志信息</el-menu-item>              
                    </el-submenu>
                    
                </el-menu>
            </el-aside>

            <!-- 内容区 -->
              <el-main style="background-color:rgb(239, 239, 239);">
                <!-- 嵌套显示页面 -->
                 <iframe width="100%" height="100%" style="border: 0px;" name="contend">
                    
                 </iframe>
            </el-main>

            </el-container>

        </el-container>
    </div>

    

      <script>
        new Vue({
            el:'#app',
            data:{
                userInfo:{}
            },
            methods:{
                // 回调函数command代表下拉框中给的唯一值
                handleCommand(command){
                    console.log(command)
                    if(command == 'a'){
                        self.frames['contend'].location.href="/user/userPro"
                    }
                    if(command == 'b'){
                        location.href="/user/updatePsw"
                    }
                    if(command == 'c'){
                        location.href="/user/loginOut"
                    }
                },
            },
            created(){
                this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            }
        })
      </script>
</body>
</html>